<template lang="">
    <div>
        <div style="background: #F5F7FB;">
            <van-tabs v-model:active="tab">
                <van-tab title="基本资料" name="zl"></van-tab>
                <van-tab title="随访" name="sf"></van-tab>
                <van-tab title="量表" name="lb"></van-tab>
                <van-tab title="档案" name="da"></van-tab>
                <van-tab title="科研组" name="ky"></van-tab>
            </van-tabs>
        </div>
        <div class="chat-content">
            <template v-for="(msg,index) in groupMsg" :key="index">
                <div class="left-content" v-if="msg.msg_from == 2">
                    <van-image  width="60" height="60" src="/static/img/girl-head.png" />
                    <div class="left-msg">{{msg.msg}}</div>
                </div>
                <div class="right-content" v-if="msg.msg_from == 1">
                    <div class="right-msg">{{msg.msg}}</div>
                    <van-image  width="60" height="60" src="/static/img/boy-head.png" />
                </div>
            </template>
           
        </div>
        <div class="chat-btn">
            <van-field
                v-model="msg"
                rows="1"
                autosize
                type="textarea"
                :rules="[{ required: true, message: '请填写用户名' }]"
            />
            <van-icon @click="send" name="description-o" size="26" />
        </div>
</div>
</template>
<script>
import { ref, reactive,onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { getChatGroup,getLastMsg,sendMsg } from "../api/index"
import { getUserInfo, log, LOCAL_USER } from "../utils/user"
import { showToast, showConfirmDialog } from 'vant';
export default {
    setup() {
        const router = useRouter()
        const route = useRoute()
        const userInfo = getUserInfo();

        const tab = ref('sf')
        const msg = ref('')
        let pid = 0;

        const groupId = ref(0);
        const groupMsg = ref([]);

        onMounted(() => {
            pid = route.params.id ? route.params.id : 0
            if(!pid){
                router.push("/Patients")
            }else{
                getChatGroup({id:pid}).then(res => {
                    log("group",res)
                    if(res.status == 'ok'){
                        groupId.value = res.data.groupId
                        groupMsg.value = res.data.msg
                    }
                })
            }
        })
        const send = () => {
            if(msg.value == ''){
                showToast("请输入发送内容")
                return;
            }
            sendMsg({gid:groupId.value,msg:msg.value,msg_type:1,msg_from:2}).then(res => {
                log("send msg",res)
                if(res.status == 'ok'){
                    groupMsg.value = groupMsg.value.concat([res.data])
                    msg.value = ''
                }
            })
        }

        
        return {
            tab,
            msg,
            groupMsg,
            send
        }
    }
}
</script>
<style scoped>
.chat-content{
    background: #F5F7FB;
    height: 80vh;
    padding:10vh 3vw 0 3vw;
    overflow-y: scroll;
    margin-bottom: 5vh;
}
.left-content {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}
.left-msg{
    margin-left: 4vw;
    max-width: 70%;
    background: #FFFFFF;
    padding: 8px;
    border-radius: 0 15px 15px 15px;

    font-size: 17px;
    font-weight: 250;
    line-height: 25px;
}
.right-content {
    display: flex;
    align-items: center;
    justify-content: end;
    margin-bottom: 10px;
}
.right-msg{
    margin-right: 4vw;
    max-width: 70%;
    background: #5AAAFB;
    color: #FFFFFF;
    padding: 8px;
    border-radius: 15px  0  15px 15px;

    font-size: 17px;
    font-weight: 250;
    line-height: 25px;
}
.chat-btn{
    position: fixed;
    bottom: 0;

    display: flex;
    align-items: center;

    width: 100vw;
    background: #FFFFFF;
}

:deep(.van-field){
    width: 90%;
}
.van-field:deep(.van-field__control){
    background: #F5F7FB;
    height: 4vh;
}
</style>  